<template>
  <div v-if="signpost && signpost.length > 0" class="appList" :style="styleSet">
    <div v-for="k in signpost" :key="k.Id" :class="showMode === 1 ? 'card' : 'list'">
      <span class="icon">
        <icon :icon="k.Icon" />
      </span>
      <span class="name">{{ k.Name }}</span>
    </div>
    <div style="clear: both;" />
  </div>
  <div v-else :style="styleSet" class="null" @click="edit">
    <span>点击配置控件</span>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px'
      },
      signpost: [],
      showMode: 0
    }
  },
  computed: {
  },
  watch: {
    width: {
      handler(val) {
        if (val && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        this.reset()
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.width) {
          this.init()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    edit() {
      this.$emit('edit', this.id)
    },
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px'
      }
    },
    reset() {
      if (this.item != null) {
        this.signpost = this.item.List
        this.showMode = this.item.ShowMode
      } else {
        this.signpost = []
        this.showMode = 0
      }
    }
  }
}
</script>
<style scoped>
.appList {
  min-height: 140px;
  padding: 10px;
}

.null {
  height: 140px;
  line-height: 140px;
  text-align: center;
}

.card {
  width: 215px;
  height: 96px;
  margin: 5px;
  padding: 8px 16px 14px;
  cursor: pointer;
  float: left;
}

.card .icon {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 2rem;
}

.card .name {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .card:hover {
  background-color: #312e2e91 !important;
}
.card:hover .name{
  color: rgb(0, 184, 153);
}
.card:hover{
  background-color: #ebecee;
}
.list {
  max-width: 215px;
  line-height: 40px;
  min-width: 160px;
  padding: 8px;
  margin: 4px 6px;
  cursor: pointer;
  float: left;
}

.list .icon {
  font-size: 16px;
  margin-right: 5px;
}

.list .name {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .list:hover {
  background-color: #312e2e91 !important;
}

.list:hover {
  background-color: #ebecee;
  color: rgb(0, 184, 153);
}
</style>
